<template>
  <div class="message-area-container">
    <!-- $listeners 是vue实例的属性 该属性就是相当于一个中间件 当出现
    多级组件嵌套时，孙组件想传递数据给爷组件，那么需要在父组件中给孙组件设置
    v-on='$listeners' 然后爷组件通过@键的方式监听孙组件传递过来的数据
     -->
    <DataForm v-on="$listeners" />
    <h3>
      {{ title }}
      <span>{{ subTitle }}</span>
    </h3>
    <DataList :list="list" />
    <!-- <div class="loading" v-loading='isLoading'></div> -->
  </div>
</template>

<script>
import DataForm from "./DataForm/DataForm.vue";
import DataList from "./DataList/DataList.vue";
export default {
  components: {
    DataForm,
    DataList,
  },
  methods: {
    handleSUB(formData, callback) {
      this.$emit("submit", formData, callback); // 将事件抛出 传递给父组件执行
    },
  },
  props: {
    title: {
      // 列表标题
      type: String,
    },
    subTitle: {
      // 列表副标题
      type: String,
    },
    list: {
      type: Array,
      default: () => [],
    },
    isListLoading: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="less" scoped>
.loading {
  position: relative;
  height: 100px;
}
</style>